
<!--
依赖 van Field DatetimePicker
@/utils/utils formatDate
使用：
<mx-datetime-picker 
  v-show="item.guarderIdType && item.guarderIdType != '1'" 
  label="出生日期" 
  placeholder="请选择出生日期" 
  v-model="item.guarderBirthday" 
  :indexNum="index" 
  @confirmTime="confirmTimeBBJH" 
/>
            
************
子父组件之间的信息传递
父->子
子组件props中接收的值，赋给新创建的data，并将该data设置双向绑定
watchEffect捕获props值的变化并且重新赋值

子到父
父组件事件绑定@idTypeValueFun="idTypeValueFun"
子组件声明emits: ["idTypeValueFun"],
向父组件传值：ctx.emit("idTypeValueFun",item.value)

能否直接使用props的值而不用再次绑定data？
可以，但是props中的值只能读，不能重新赋值

属性传值 
父：policyholderData="policyholderData"
子：ctx.emit("policyholderData",state.policyholder)
注：一级父和子可以指传值  二级父和子则传值失败

v-model
父组件：v-model="policyholder.idType"
子组件props:
modelValue:{
  type:String,
  default:""
},
emits: ["update:modelValue"],
向父组件传值
ctx.emit("update:modelValue",item.value)
************
-->
<template>
  <div v-show="show">
    <van-field :label="label" readonly  :disabled="holderDisabled" clickable is-link @focus="timeShow=true" v-model="birthday" :placeholder="placeholder" />
    <van-popup v-model:show="timeShow" position="bottom" >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmTime"
        @cancel="cancelTime"
      />
    </van-popup>
  </div>
</template>
<script lang="ts">

import { watch,watchEffect,defineComponent,reactive,toRefs,computed } from 'vue';
import { formatDate} from '@/utils/utils';

export default defineComponent({
  name:"ActionSheet",
  props:{
    indexNum:{
      type:Number,
      default:0
    },
    show:{
      type:Boolean,
      default:true
    },
    modelValue:{
      type:String,
      default:""
    },
    label:{
      type:String,
      default:""
    },
    placeholder:{
      type:String,
      default:""
    },
    holderDisabled:{
      type:Boolean,
      default:false
    }
  },
  emits: ["update:modelValue","confirmTime"],
  setup(props, ctx){
    interface Item{
      name: string;
      value: string;
    }
    
    // 数据双向绑定
    const state=reactive({
      timeShow:false,//出生日期时间插件显示
      birthday:props.modelValue,
    })
    
    watchEffect(()=>{
      state.birthday=props.modelValue
    })
    
    const methodsFun=reactive({
      // 时间选择事件
      confirmTime:(val: string)=>{
        const fTime=formatDate(val)
        state.birthday=fTime;
        state.timeShow=false;
        ctx.emit("update:modelValue",fTime)
        ctx.emit("confirmTime",fTime,props.indexNum)
      },
      cancelTime:()=>{
        state.timeShow=false;
      }
      
    })
    return {
      ...toRefs(state),

      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),

      ...toRefs(methodsFun)
    }
  }
})
</script>